<template>
    <span id="getCode" @click="getCode"><em v-show="isTimeDown">倒计时(</em>{{content}} <em v-show="isTimeDown">)</em></span>
</template>

<script>
const regMobile = /^1[3|5|6|7|8|9]\d{9}$/
export default {
  name: 'getCode',
  props: ['mobile'],
  data() { 
    return {
        content: "发送验证码",
        isTimeDown: false
    }
  },
  created() {

  },
  methods:{
    showLoading(msg) {
        this.$loading.show(msg)
        setTimeout(() => {
            this.$loading.hide()
        }, 1000);
    },
    getCode() {
        if(this.mobile) {
            if(!regMobile.test(this.mobile)) {
                this.showLoading('请您填写正确的手机号')
                return
            }
            let timer
            this.content = 60
            this.isTimeDown = true
            clearInterval(timer)
            timer = setInterval(() => {
                if(this.content > 1) {
                    this.content--
                } else {
                    clearInterval(timer)
                    this.content = '发送验证码'
                    this.isTimeDown = false
                }
            }, 1000)
            this.$emit('getcode', true)
        } else {
            this.showLoading('请填写手机号')
        }
        
    }
  },
 }
</script>

<style scoped lang="scss">
    #getCode{
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        background-color: #eee;
        color: #333;
        text-align: center;
        border-radius: 4px;
        em {
            font-style: normal;
        }
    }
</style>